<template>
    <div class="view">
        <android-nav-bar title="我的红娘牵线" v-on:back="back"></android-nav-bar>
        <div class="has-watcher" v-if="user.userRank<=1">
            <div class="nav-box">
                <svg width="100vw" height="130" version="1.1" xmlns="http://www.w3.org/2000/svg">
                    <path :d="`M0 100 c${screenWidth/3} -${60 * screenWidth/320}, ${screenWidth/3*2} -${60 * screenWidth/320}, ${screenWidth} 0 V 130 H 0 Z`"
                          stroke="#fff" fill="#fff"></path>
                </svg>
                <div class="arc-box" :style="`height: 80px;bottom: 0px;`">
                    <div class="head-img-container">
                        <svg class="svg-icon huangguan" aria-hidden="true">
                            <use xlink:href="#icon-huangguan3-copy"></use>
                        </svg>
                        <div class="head-img-box">
                            <head-img class="self-img" :styleObject="{width:'25vw',height:'25vw'}" showObject="self"
                                      :self="self" noneImgTip="上传头像"></head-img>
                            <p class="state-tip" v-if="user.avatar &&user.avatar.fileStatus.status==0">审核中</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="un-senior-member">
                <div class="matchmaker-tip"><b>{{matchmakerIntentionTotal}}</b>位红娘有意向为您提供牵线服务</div>
                <div class="member-open-tip">开通高级会员查看您的红娘服务</div>
                <div class="member-open" @click="toPage('mineMemberRank')">立即开通</div>
                <div class="matchmaker-box flex">
                    <div class="watcher" v-for="item in matchmakerIntention.slice(0,3)">
                        <div class="avatar">
                            <div class="none-avatar" v-if="!item.matchmaker.avatar">
                                <span class="iconfont"
                                      :class="item.matchmaker.gender==2?'icon-touxiang-nv':'icon-touxiang1'"></span>
                            </div>
                            <div class="has-avatar" v-if="item.matchmaker.avatar">
                                <img :src="item.matchmaker.avatar.file_path">
                                <span class="iconfont icon-suo"></span>
                            </div>
                            <p class="creat-time">{{new Date(item.create_time*1000).getMonth()+1<10?'0'+(new
                                Date(item.create_time*1000).getMonth()+1):new
                                Date(item.create_time*1000).getMonth()+1}}月{{new
                                Date(item.create_time*1000).getDate()<10?'0'+new
                                Date(item.create_time*1000).getDate():new Date(item.create_time*1000).getDate()}}日</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="matchmaker-service-open" v-if="user.userRank>1&&userMatchmakerStatus">
            <div class="inner-box flex">
                <div class="user">
                    <svg class="svg-icon huangguan" aria-hidden="true">
                        <use :xlink:href="user.userRank==1?'#icon-huangguan3-copy':user.userRank==2?'#icon-VIPhuangguan':'#icon-fenka-huangguan'"></use>
                    </svg>
                    <div class="head-img-box">
                        <head-img class="self-img" :styleObject="{width:'25vw',height:'25vw'}" showObject="self"
                                  :self="self" noneImgTip="上传头像"></head-img>
                        <p class="state-tip" v-if="user.avatar &&user.avatar.fileStatus.status==0">审核中</p>
                    </div>
                </div>
                <div class="link">
                    <div class="tip">牵线中...
                        <svg class="svg-icon" aria-hidden="true">
                            <use xlink:href="#icon-tubiao_UMEqianxian"></use>
                        </svg>
                    </div>
                    <div class="line1"></div>
                    <div class="line1"></div>
                </div>
                <div class="matchmaker" @click="toPage('matchmakerDetail',{matchmakerId:mineMatchmaker.user_id})">
                    <div class="head-img-box">
                        <img v-if="mineMatchmaker.avatar_id&&mineMatchmaker.avatar&&mineMatchmaker.avatar.file_status.status" class="avatar" :src="mineMatchmaker.avatar.file_path">
                        <svg v-else class="svg-icon hongniang" aria-hidden="true">
                            <use xlink:href="#icon-hongniang"></use>
                        </svg>
                        <svg class="svg-icon matchmaker-rank" aria-hidden="true">
                            <use :xlink:href="mineMatchmaker.user_rank==4?'#icon-yinhuangguan':mineMatchmaker.user_rank==5?'#icon-tonghuangguan':'#icon-jinhuangguan'"></use>
                        </svg>
                    </div>
                    <div class="chat">
                        <span @click.stop="toPage('chatDetail',{toId:mineMatchmaker.user_id})"><i class="iconfont icon-iconfontquanbuxiaoxizhengchang">&nbsp;</i>去聊天</span>
                    </div>
                </div>
            </div>
            <div class="cancelBind" @click="cancelBind(mineMatchmaker.user_id)">解除现有红娘绑定</div>
        </div>
        <div class="matchmaker-service-close" v-if="user.userRank>1&&!userMatchmakerStatus">
            <cube-tab-bar v-model="selectedLabel"
                          show-slider
                          :use-transition="false"
                          ref="tabNav"
                          :data="tabs">
            </cube-tab-bar>
            <div class="tab-slide-container">
                <cube-slide
                        ref="slide"
                        :loop="false"
                        :initial-index="initialIndex"
                        :auto-play="false"
                        :show-dots="false"
                        :options="slideOptions"
                        @change="changePage"
                        @scroll="scroll"
                >
                    <!-- 意向红娘 -->
                    <cube-slide-item>
                        <div class="none-fans" v-if="!matchmakerIntention.length">
                            暂无意向红娘!
                        </div>
                        <cube-scroll class="scroll" ref="scroll1" v-if="matchmakerIntention.length"
                                     :data="matchmakerIntention"
                                     :options="scrollOptions"
                                     @pulling-down="onPullingDown"
                                     @pulling-up="onPullingUp">
                            <keep-alive>
                                <ul class="list-wrapper">
                                    <li v-for="(item, index) in matchmakerIntention" class="list-item flex" :key="index" @click="toPage('matchmakerDetail',{matchmakerId:item.matchmaker.user_id})">
                                        <div class="avatar">
                                            <!--                                        <img class="avatar" :src="item.matchmaker.avatar_id?item.matchmaker.avatar.file_path:filePath">-->
                                            <img v-if="item.matchmaker.avatar_id&&item.matchmaker.avatar&&item.matchmaker.avatar.file_status.status" class="avatar"
                                                 :src="item.matchmaker.avatar.file_path">
                                            <svg v-else class="svg-icon hongniang" aria-hidden="true">
                                                <use xlink:href="#icon-hongniang"></use>
                                            </svg>
                                            <svg class="svg-icon huangguan" aria-hidden="true">
                                                <use xlink:href="#icon-biaoqian-youyixiang"></use>
                                            </svg>
                                        </div>
                                        <div class="info">
                                            <div class="nickname ellipsis">{{item.matchmaker.nickName}}
                                                <svg class="svg-icon huangguan" aria-hidden="true">
                                                    <use xlink:href="#icon-nicheng"></use>
                                                </svg>
                                            </div>
                                            <div class="rank">
                                                {{item.matchmaker.rank_name}}
                                                <svg class="svg-icon huangguan" aria-hidden="true">
                                                    <use :xlink:href="item.matchmaker.user_rank==4?'#icon-putong':item.matchmaker.user_rank==5?'#icon-VIPhuangguan':'#icon-huiyuan'"></use>
                                                </svg>
                                            </div>
                                            <div class="intro ellipsis">{{item.identity_introduction}}</div>
                                        </div>
                                        <div class="handle">
                                            <div class="agree" @click.stop="agreeMatch(item.id,1)"><span class="iconfont icon-tijiaochenggong"></span>同意</div>
                                            <div class="disagree" @click.stop="agreeMatch(item.id,2)"><span class="iconfont icon-cuowu"></span>不同意</div>
                                        </div>
                                    </li>
                                </ul>
                            </keep-alive>
                        </cube-scroll>
                    </cube-slide-item>
                    <!-- 红娘市场 -->
                    <cube-slide-item>
                        <div class="none-fans" v-if="!matchmakerList.length">
                            暂无红娘!
                        </div>
                        <cube-scroll class="scroll" ref="scroll2" v-if="matchmakerList.length"
                                     :data="matchmakerList"
                                     :options="scrollOptions"
                                     @pulling-down="onPullingDown"
                                     @pulling-up="onPullingUp">
                            <ul class="list-wrapper">
                                <li v-for="(item, index) in matchmakerList" class="list-item flex" :key="index" @click="toPage('matchmakerDetail',{matchmakerId:item.user_id})">
                                    <div class="avatar">
                                        <img v-if="item.avatar_id&&item.avatar&&item.avatar.file_status.status" class="avatar" :src="item.avatar.file_path">
                                        <svg v-else class="svg-icon hongniang" aria-hidden="true">
                                            <use xlink:href="#icon-hongniang"></use>
                                        </svg>
                                    </div>
                                    <div class="info">
                                        <div class="nickname ellipsis">{{item.nickName}}
                                            <svg class="svg-icon huangguan" aria-hidden="true">
                                                <use xlink:href="#icon-nicheng"></use>
                                            </svg>
                                        </div>
                                        <div class="rank">{{item.rank_name}}
                                            <svg class="svg-icon huangguan" aria-hidden="true">
                                                <use :xlink:href="item.user_rank==4?'#icon-putong':item.user_rank==5?'#icon-VIPhuangguan':'#icon-huiyuan'"></use>
                                            </svg>
                                        </div>
                                        <div class="intro ellipsis">{{item.identity_introduction}}</div>
                                    </div>
                                    <div class="handle apply" @click.stop="applyMatch(item.user_id)">申请牵线</div>
                                </li>
                            </ul>
                        </cube-scroll>
                    </cube-slide-item>
                </cube-slide>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch, Inject} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";
    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import CommonUnit from "@/unit/CommonUnit";
    import {updateUser} from "@/store/dispatches";
    import UserEntity from "@/entity/UserEntity";
    import HeadImg from "@/components/HeadImg.vue";
    import AndroidNavBar from "@/components/aui/AndroidNavBar.vue";

    @Component({
        components: {
            HeadImg,
            AndroidNavBar
        }
    })
    export default class MineMatchmaker extends Scene {
        private publicPath: string = process.env.BASE_URL;
        private filePath: string = require("@/assets/images/user-no-face.jpg");
        @State("UserStore")
        public user!: InterfaceUser;
        private userMatchmakerStatus: number = 0;
        private mineMatchmaker: any = {};
        private matchmakerIntentionTotal: number = 0;
        private matchmakerList: any[] = [];
        private matchmakerIntention: any[] = [];
        private pageOne: number = 1;
        private pageTwo: number = 1;
        private selectedLabel: string = "意向红娘";
        private isKeepAlive = true;
        @Inject({
            from: "reload", default: () => {
            }
        })
        private reload !: any;

        private activated() {
            if (this.isKeepAlive) {
                this.pageOne = 1;
                this.pageTwo = 1;
                this.getIntentionMatchmaker();
                if (this.user.userRank > 1) {
                    this.getMatchmakerStatus();
                }
            }

        }

        private deactivated() {

        }

        private get tabs(): Array<any> {
            return [
                {
                    label: "意向红娘"
                },
                {
                    label: "红娘市场"
                }
            ];
        }

        private get slideOptions(): any {
            return {
                listenScroll: true,
                probeType: 3,
                /* lock y-direction when scrolling horizontally and  vertically at the same time */
                directionLockThreshold: 0
            };
        }

        private get scrollOptions(): any {
            return {
                /* lock x-direction when scrolling horizontally and  vertically at the same time */
                directionLockThreshold: 0,
                pullDownRefresh: {txt: "更新成功"},
                pullUpLoad: {
                    threshold: 0,
                    txt: {more: "", noMore: "没有更多数据了..."},
                    visible: true
                },
                scrollbar: true
            };
        }

        private findIndex(ary: Array<object>, fn: any): number {
            if (ary.findIndex) {
                return ary.findIndex(fn);
            }
            let index = -1;
            ary.some((item: Object, i: any, ary: Array<object>) => {
                const ret = fn.call(this, item, i, ary);
                if (ret) {
                    index = i;
                    return ret;
                }
            });
            return index;
        }

        private get initialIndex(): number {//cube-slide资料，匹配，动态滑动
            let index = 0;
            index = this.findIndex(this.tabs, (item: any) => item.label === this.selectedLabel);
            return index;
        }

        private changePage(current: number) {
            this.selectedLabel = this.tabs[current].label;
        }

        private scroll(pos: any) {
            const x = Math.abs(pos.x);
            const tabItemWidth = (this as any).$refs.tabNav.$el.clientWidth;
            const slideScrollerWidth = (this as any).$refs.slide.slide.scrollerWidth;
            const deltaX = x / slideScrollerWidth * tabItemWidth;
            (this as any).$refs.tabNav.setSliderTransform(deltaX);
        }

        private get screenWidth(): number {
            const screenWidth = window.screen.width;
            return screenWidth;
        }

        private get options(): any {
            return {
                pullDownRefresh: {txt: "更新成功"},
                pullUpLoad: {
                    threshold: 0,
                    txt: {more: "上滑加载更多", noMore: "没有更多数据了..."},
                    visible: true
                },
                scrollbar: true
            };
        }

        private get self(): any {
            return {
                sex: this.user.gender,
                headImg: this.user.avatar ? this.user.avatar.filePath : "",
            };
        }

        private onPullingDown(): void {
            let scrollName = "";
            if (this.selectedLabel == "意向红娘") {
                scrollName = "scroll1";
            } else {
                scrollName = "scroll2";
            }
            (this as any).$refs[scrollName].forceUpdate();
        }

        private onPullingUp(): void {
            let inter = "";
            let page = 2;
            let scrollName = "";
            if (this.selectedLabel == "意向红娘") {
                inter = this.api.getUnapprovedMatchmakerList;
                page = this.pageOne;
                scrollName = "scroll1";
            } else {
                inter = this.api.getMatchmakerList;
                page = this.pageTwo;
                scrollName = "scroll2";
            }
            Http.get(inter, {page: page, size: 10}, {token: this.user.token}).then((res) => {
                if (res.code == 1) {
                    if (res.data.data !== []) {
                        if (this.selectedLabel == "意向红娘") {
                            this.matchmakerIntention = this.matchmakerIntention.concat(res.data.data);
                            this.pageOne++;
                        } else {
                            this.matchmakerList = this.matchmakerList.concat(res.data.data);
                            this.pageTwo++;
                        }
                        this.$nextTick(() => {
                            (this as any).$refs[scrollName].refresh();
                            (this as any).$refs[scrollName].forceUpdate();
                        });
                    } else if (res.data.data == []) {
                        (this as any).$refs[scrollName].forceUpdate();
                    }
                }
            });
        }

        private getMatchmakerStatus(): void {
            Http.get(this.api.getMatchmakerStatus, {}, {token: this.user.token}).then((res) => {
                if (res.code == 1) {
                    this.userMatchmakerStatus = res.data.status;
                    if (res.data.status == 0) {
                        this.getMatchmakerList();
                    } else {
                        this.mineMatchmaker = res.data.matchmaker.matchmaker;
                    }
                } else {
                    this.globalSingleResultToast(res);
                }
            }).catch((res) => {
                console.log(res);
                (<any> this).$createToast({
                    time: 2500,
                    type: "error",
                    txt: "网络繁忙,暂无信息!",
                    mask: true,
                    onTimeout: () => {
                        this.navigateBack();
                    }
                }).show();
            });
        }

        private getIntentionMatchmaker(): void {
            Http.get(this.api.getUnapprovedMatchmakerList, {page: this.pageOne, size: 10}, {token: this.user.token}).then((res) => {
                if (res.code == 1) {
                    this.matchmakerIntentionTotal = res.data.data.length;
                    this.matchmakerIntention = res.data.data;
                    this.pageOne++;
                } else {
                    this.globalSingleResultToast(res);
                }
            }).catch((res) => {
                console.log(res);
                (<any> this).$createToast({
                    time: 2500,
                    type: "error",
                    txt: "网络繁忙,暂无信息!",
                    mask: true,
                    onTimeout: () => {
                        this.navigateBack();
                    }
                }).show();
            });
        }

        private getMatchmakerList(): void {
            Http.get(this.api.getMatchmakerList, {page: this.pageTwo, size: 10}, {token: this.user.token}).then((res) => {
                if (res.code == 1) {
                    this.matchmakerList = res.data.data;
                    this.pageTwo++;
                } else {
                    this.globalSingleResultToast(res);
                }
            }).catch((res) => {
                console.log(res);
                (<any> this).$createToast({
                    time: 2500,
                    type: "error",
                    txt: "网络繁忙,暂无信息!",
                    mask: true,
                    onTimeout: () => {
                        this.navigateBack();
                    }
                }).show();
            });
        }

        private applyMatch(id: number): void {
            (this as any).$createDialog({
                type: "confirm",
                icon: "cubeic-alert",
                title: "确认申请牵线",
                content: "",
                confirmBtn: {
                    text: "确定",
                    active: true,
                    disabled: false,
                    href: "javascript:;"
                },
                cancelBtn: {
                    text: "取消",
                    active: false,
                    disabled: false,
                    href: "javascript:;"
                },
                onConfirm: () => {
                    let toast = (<any> this).$createToast({
                        time: 0,
                        txt: "申请中...",
                        mask: true
                    }).show();
                    try {
                        Http.post(this.api.establishMatchmaker, {user_id: id}, {token: this.user.token}).then((res) => {
                            if (res.code === 1) {
                                this.authentication();
                                toast = (<any> this).$createToast({
                                    time: 2500,
                                    txt: "申请成功",
                                    type: "correct",
                                    mask: true,
                                    onTimeout: () => {
                                        this.isKeepAlive = true;
                                        this.reload();
                                    }
                                }).show();
                            } else {
                                toast.hide();
                                this.globalSingleResultToast(res);
                            }
                        });
                    } catch (e) {
                        toast.hide();
                    }
                },
                onCancel: () => {

                }
            }).show();
        }

        private cancelBind(id: number): void {
            (this as any).$createDialog({
                type: "confirm",
                icon: "cubeic-alert",
                title: "确认解除绑定",
                content: "",
                confirmBtn: {
                    text: "确定",
                    active: true,
                    disabled: false,
                    href: "javascript:;"
                },
                cancelBtn: {
                    text: "取消",
                    active: false,
                    disabled: false,
                    href: "javascript:;"
                },
                onConfirm: () => {
                    let toast = (<any> this).$createToast({
                        time: 0,
                        txt: "解绑中...",
                        mask: true
                    }).show();
                    try {
                        Http.post(this.api.detachMatchmaker, {user_id: id}, {token: this.user.token}).then((res) => {
                            if (res.code === 1) {
                                this.authentication();
                                toast = (<any> this).$createToast({
                                    time: 2500,
                                    txt: "解绑成功",
                                    type: "correct",
                                    mask: true,
                                    onTimeout: () => {
                                        this.isKeepAlive = true;
                                        this.reload();
                                    }
                                }).show();
                            } else {
                                toast.hide();
                                this.globalSingleResultToast(res);
                            }
                        });
                    } catch (e) {
                        toast.hide();
                    }
                },
                onCancel: () => {

                }
            }).show();
        }

        private agreeMatch(id: number, isAgree: number): void {
            (this as any).$createDialog({
                type: "confirm",
                icon: "cubeic-alert",
                title: `确认${isAgree == 1 ? "" : "不"}同意牵线`,
                content: "",
                confirmBtn: {
                    text: "确定",
                    active: true,
                    disabled: false,
                    href: "javascript:;"
                },
                cancelBtn: {
                    text: "取消",
                    active: false,
                    disabled: false,
                    href: "javascript:;"
                },
                onConfirm: () => {
                    let toast = (<any> this).$createToast({
                        time: 0,
                        txt: "提交中...",
                        mask: true
                    }).show();
                    try {
                        Http.post(this.api.submitMatchmakerApproveResult, {id: id, status: isAgree}, {token: this.user.token}).then((res) => {
                            if (res.code === 1) {
                                this.authentication();
                                toast = (<any> this).$createToast({
                                    time: 2500,
                                    txt: "提交成功",
                                    type: "correct",
                                    mask: true,
                                    onTimeout: () => {
                                        this.isKeepAlive = true;
                                        this.reload();
                                    }
                                }).show();
                            } else {
                                toast.hide();
                                this.globalSingleResultToast(res);
                            }
                        });
                    } catch (e) {
                        toast.hide();
                    }
                },
                onCancel: () => {

                }
            }).show();
        }

        private back(): void {
            this.navigateBack();
        }

        private toPage(name: string, query: any = {}): any {
            this.isKeepAlive = false;
            this.navigateTo({
                name: name,
                query: query
            });
        }

        private mounted(): void {
            let loadToast = (<any> this).$createToast({
                time: 0,
                type: "loading",
                mask: true,
                txt: "加载中..."
            }).show();
            // this.getIntentionMatchmaker();
            // if (this.user.userRank > 1) {
            //     this.getMatchmakerStatus();
            // }
            this.$nextTick(() => {
                loadToast.hide();
            });
        }

        private toLookInfo(friendId: number): void {
            // 跳转到好友详情
            this.navigateTo({
                name: "friendInfo",
                query: {friendId: friendId}
            });
        }

    }
</script>

<style scoped lang="stylus">
    .view
        position relative;
        width 100vw;
        height 100vh;
        overflow hidden
        background $theme-page-common-background-color;

        .matchmaker-service-open
            margin-top calc(47px + var(--safe-area-inset-top));
            height calc(100vh - 47px - var(--safe-area-inset-top));
            background linear-gradient(to bottom, rgba(255, 255, 255, .6), rgba(254, 124, 79, .6));

            &::before
                display table;
                content '';

            .cancelBind
                color #fff;
                height 45px;
                line-height 45px;
                text-align center;
                border-radius 200px;
                margin 10px 30px;
                background linear-gradient(to right, rgba(254, 124, 79, .6), rgba(255, 89, 163, .6));

            .inner-box
                width 100vw;
                height 200px;
                margin-top calc((100vh - 47px - 200px) / 2 - 100px);
                justify-content: space-around;
                align-items center;

                .link
                    text-align center;
                    position relative;

                    .tip
                        color $theme-common-color;
                        margin-bottom 7px;

                        svg
                            font-size 24px;
                            position absolute;
                            bottom 3px;
                            left calc(50% - 12px);

                    .line1
                        width 100px;
                        height 12px;
                        border-top 2px solid #fff;

                        span
                            //display inline-block;
                            //width 100px;
                            font-size 30px;
                            color #fff;

                .user
                    width 25vw;
                    height 25vw;
                    position relative;
                    border-radius 50%;
                    text-align center;

                    svg.huangguan
                        font-size 37px;
                        position absolute;
                        top 0px;
                        left 50%;
                        z-index 1000;
                        transform translate(-50%, -70%);

                    .head-img-box
                        position absolute;
                        border-radius 50%;
                        overflow hidden;

                        .state-tip
                            width 100%;
                            height 20px;
                            line-height 20px;
                            color #fff;
                            font-size 10px;
                            background-color rgba(0, 0, 0, .5);
                            position absolute;
                            bottom 0;
                            left 0;

                .matchmaker
                    width 25vw;
                    height 25vw;

                    .head-img-box
                        position relative;
                        width 25vw;
                        height 25vw;
                        border-radius 50%;

                        svg.matchmaker-rank
                            position absolute;
                            right 10px;
                            top -16px;
                            font-size 30px;

                        svg.hongniang
                            width 25vw;
                            height 25vw;
                            border-radius 50%;

                        img
                            width 100%;
                            height 100%;
                            border-radius 50%;


                    .chat
                        color $theme-common-color;
                        text-align center;
                        margin-top 5px;

        .matchmaker-service-close
            margin-top calc(47px + var(--safe-area-inset-top));
            height calc(100vh - 47px - var(--safe-area-inset-top));
            position relative;
            background-color #fff;

            .tab-slide-container
                position: fixed;
                top: calc(47px + 45px + var(--safe-area-inset-top));
                left: 0
                right: 0
                bottom: 0

            >>> .cube-tab-bar
                background-color #fff;
                padding 8px 0;
                border-bottom 1px solid $theme-line-color;

                .cube-tab-bar-slider
                    z-index 1000;

            .none-fans
                padding-top 50px;
                padding-bottom calc(100vh - 160px - 47px - 44px - 50px - 15px);
                text-align center;

            .scroll
                background-color #fff;

                .list-wrapper
                    .list-item
                        margin 15px 10px;
                        padding-bottom 15px;
                        justify-content: space-around;
                        align-items center;
                        border-bottom 1px solid $theme-line-color;

                        .avatar
                            width 70px;
                            height 70px;
                            border-radius 50%;
                            position relative;

                            svg
                                position absolute;
                                font-size 40px;
                                right 0px;

                            svg.hongniang
                                width 70px;
                                height 70px;
                                border-radius 50%;

                        //opacity .8;

                        .info
                            width calc(100vw - 100px - 20px - 70px);
                            line-height 35px;

                            .nickname
                                svg
                                    font-size 20px;

                            .rank
                                color $theme-viceColor-font;

                                svg
                                    font-size 18px;

                            .intro
                                color $theme-viceColor-font;

                        .apply
                            width 70px;
                            border 1px solid $theme-common-color;
                            padding 8px 0;
                            border-radius 7px;
                            text-align center;
                            color $theme-common-color;

                        .handle
                            .agree, .disagree
                                width 70px;
                                border 1px solid $theme-common-color;
                                padding 6px 0;
                                border-radius 7px;
                                text-align center;
                                color $theme-common-color;

                            .agree
                                margin-bottom 10px;

        .has-watcher
            margin-top 47px;

            .nav-box
                position relative;
                width 100vw;
                height 200px;
                //background linear-gradient(to right, rgba(254, 124, 79, .6), rgba(255, 89, 163, .6));
                background linear-gradient(to bottom, rgba(255, 255, 255, .6), rgba(254, 124, 79, .6));

                svg
                    position absolute;
                    bottom 0px;
                    left 0px;

                .arc-box
                    position absolute;
                    left 0px;
                    width 100vw;
                    z-index 50;

                    .head-img-container
                        width 25vw;
                        height 25vw;
                        position absolute;
                        bottom 40px;
                        left calc(50vw - 11vw);
                        border-radius 50%;
                        text-align center;

                        > svg.huangguan
                            font-size 26px;
                            position absolute;
                            top 0px;
                            left 50%;
                            z-index 1000;
                            transform translate(-50%, -70%);

                        .head-img-box
                            position absolute;
                            border-radius 50%;
                            overflow hidden;

                            .state-tip
                                width 100%;
                                height 20px;
                                line-height 20px;
                                color #fff;
                                font-size 10px;
                                background-color rgba(0, 0, 0, .5);
                                position absolute;
                                bottom 0;
                                left 0;


            .un-senior-member
                text-align center;
                height calc(100vh - 200px);
                background-color #fff;

                .matchmaker-tip
                    color $theme-common-color;

                    b
                        font-size 30px;

                .member-open-tip
                    padding 10px;

                .member-open
                    color #fff;
                    height 45px;
                    line-height 45px;
                    text-align center;
                    border-radius 200px;
                    margin 10px 30px;
                    background linear-gradient(to right, rgba(254, 124, 79, .6), rgba(255, 89, 163, .6));

                .matchmaker-box
                    padding 20px 0px;
                    justify-content: space-around;

                    .watcher

                        .avatar
                            width 25vw;

                            .creat-time
                                padding 10px 0px;

                            .none-avatar
                                width 25vw;
                                height 25vw;
                                line-height 25vw;
                                border-radius 50%;
                                background-color #F3F3F3;

                                .iconfont
                                    font-size 60px;
                                    color #C0C0C0;

                            .has-avatar
                                width 25vw;
                                height 25vw;
                                position relative;

                                img
                                    width 25vw;
                                    height 25vw;
                                    border-radius 50%;
                                    display block;

                                .icon-suo
                                    position absolute;
                                    top 50%;
                                    left 50%;
                                    transform translate(-50%, -50%);
                                    font-size 40px;
                                    color rgba(255, 255, 255, .7);

        .scroll.is-senior-member
            margin-top 47px;
            height calc(100vh - var(--safe-area-inset-top) - 47px);
            background-color #fff;
            position relative;
            padding 0 0 calc(15px + var(--safe-area-inset-bottom)) 0px;

            .date-sort
                .time
                    padding 0px 10px;
                    height 30px;
                    line-height 30px;

                    .circle
                        display: inline-block;
                        width 10px;
                        height 10px;
                        border 1px solid $theme-viceColor-font;
                        border-radius 50%;

                .content
                    margin-left 15px;
                    border-left 1px solid $theme-line-color;
                    flex-wrap wrap;
                    justify-content left;

                    .item
                        width calc((100vw - 15px - 1px) / 3);
                        padding 10px 10px;
                        text-align center;

                        .has-avatar
                            width 100%;
                            height calc((100vw - 15px - 1px) / 3 - 40px);

                            img
                                display inline-block;
                                width calc((100vw - 15px - 1px) / 3 - 40px);
                                height calc((100vw - 15px - 1px) / 3 - 40px);
                                border-radius 50%;

                        .none-avatar
                            margin 0 auto;
                            width calc((100vw - 15px - 1px) / 3 - 40px);
                            height calc((100vw - 15px - 1px) / 3 - 40px);
                            line-height calc((100vw - 15px - 1px) / 3 - 40px);
                            border-radius 50%;
                            background-color #F3F3F3;

                            .iconfont
                                font-size 60px;
                                color #C0C0C0;

                        .nickname
                            padding 7px 0px;

                        .age
                            color $theme-viceColor-font;
                            font-size 12px;

                        .handle
                            height 40px;
                            line-height 40px;

                            span
                                color $theme-common-color;
                                border 1px solid $theme-common-color;
                                border-radius 5px;
                                padding 3px 10px;

    .new-app
        position absolute !important;
        color rgba(0, 0, 0, 0);
        right -5px;
        top -5px;
        transform scale(.4)
</style>
